<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浙江省嘉兴市月度预测</title>
    <script src="echarts.min.js"></script>
    <style type="text/css">
        a:link {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: black    ;
            text-decoration: underline;
        }

        a:active {
            color: black;
            text-decoration: underline;
        }

        #suoyin {
            height: 100px;
            width: 1465px;
            background-color: white;
        }

        #kuangjia {

            width: 100%;
            height: 100px;
            background-color: rgb(7, 43, 7);
        }

        .box {
            width: 500px;
            height: 40px;
            border: 2px solid rgb(7, 94, 40);
            margin: auto;

        }

        .input {
            float: left;
            width: 400px;
            height: 40px;
            outline: none;
            border: none;
        }

        .button {
            float: left;
            width: 96px;
            height: 40px;
            color: white;
            background-color: rgb(15, 116, 37);
            border: none;
            outline: none;
        }

        #zhuti {
            width: 100%;
            height: 2700px;
            background-color: rgb(6, 49, 13);
        }

        /* .daohang {
            top: 0;
            position: fixed;
        } */

        .yuefen1 {
            width: 100%;
            text-align: center;
        }

        .biao {
            width: 100%;
            text-align: center;
        }

        h1 {
            font-size: large;
            color: whitesmoke;
            text-align: left;
        }

        .fudong {
            width: 100%;
            height: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .tianqi
        {
            font-size: 30px;
            color: whitesmoke;
            position: relative;
            top: 350px;
            right: 1250px;
        }
        .yubao
        {
            width: 300px;
            font-size: 30px;
            color: whitesmoke;
            position: relative;
            top: -30px;
            left: 1150px;
        }
        .tu{
            width: 100%;
            height: 1000px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="daohang">
        <div id="suoyin">
            <br>
            <img src="zixun.png" alt="" height="20px" align="top">
               <a href="https://xu-zhouyu.gitee.io/weather/weather/index.html">天气</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">三维地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">每小时预报</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">月度预报</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">台风</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">天气预警</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">气温雨量统计</a>&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="">空气质量</a>
               <h4 align="right"><a href="https://xu-zhouyu.gitee.io/weather/weather/登录注册.html">登录/注册</a></h4>
        </div>
        <div id="kuangjia">
            <br>
            <div class="box">
                <input type="text" class="input" placeholder="搜索位置">
                <input type="button" class="button" value="搜索">
            </div>
            <p style="color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浙江省，嘉兴市，海宁市</p>
        </div>

    </div>

    <div id="zhuti">
        <div class="yuefen1">
            <img src="yuefen.png" alt="" width="90%" align="center">
        </div>
        <div class="biao">
            <img src="biao.jpg" alt="" width="90%" align="center" usemap="#查看完整预报">
            <map name="查看完整预报" id="查看完整预报">
                <area shape="rect" coords="700,700,750,740" href="" alt="">
            </map>
        </div>
        <div id="jiangshui" style="height: 400px; width: 650px;float: left;left: 50px;"></div>
        <script src="tubiao.js"></script>
        <div id="wendu" style="height: 400px; width: 650px;float: left;left: 50px;"></div>
        <script src="tubiao.js"></script>
        <div class="fudong">
            <br>
            <div class="tianqi">天气资讯</div> 
            <div class="yubao"><a href="" style="color: white;">查看完整预报</a></div>         
            <iframe src="https://baijiahao.baidu.com/s?id=1768560138952947783&wfr=spider&for=pc" frameborder="0"
                width="650" height="400"></iframe>
            &nbsp;&nbsp;
            <iframe src="https://baijiahao.baidu.com/s?id=1768547555675531899&wfr=spider&for=pc" frameborder="0"
                width="650" height="400" marginwidth="10px"></iframe>
        </div>
        <div class="tu">
            <a href="https://www.msn.cn/zh-cn/news/other/%E7%83%AD%E6%B5%AA%E6%9D%A5%E8%A2%AD-%E8%BE%BD%E5%AE%81%E5%B0%86%E8%BF%8E%E6%8C%81%E7%BB%AD%E6%99%B4%E7%83%AD%E9%AB%98%E6%B8%A9%E5%A4%A9%E6%B0%94%E5%B1%80%E9%83%A8%E6%88%96%E8%B6%8540/ar-AA1csUhz?ocid=msedgntp&cvid=935c5e8baa0a4d70d0bef5661deb605b&ei=28">
                <img src="tianqi.png" alt=""width="620"></a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.msn.cn/zh-cn/news/other/%E4%B8%AD%E5%9B%BD%E6%B0%94%E8%B1%A1%E5%B1%80%E9%A6%96%E5%B8%AD%E4%B8%93%E5%AE%B6-%E6%88%91%E4%BB%AC%E5%8D%B3%E5%B0%86%E8%BF%8E%E6%9D%A5%E4%B8%80%E6%AC%A1%E4%B8%AD%E7%AD%89%E5%BC%BA%E5%BA%A6%E4%BB%A5%E4%B8%8A%E7%9A%84%E5%8E%84%E5%B0%94%E5%B0%BC%E8%AF%BA%E4%BA%8B%E4%BB%B6/ar-AA1cvMil?ocid=msedgntp&cvid=bbb5537d1f1a45e2bb834107f66624ee&ei=24">
                <img src="tianqi1.png" alt="" width="620" marginwidth="10px"></a>
            <br><br>
            <a href="https://www.tianqi.com/news/326114.html?qid=micro"><img src="tianqi2.png" alt="" width="300"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.msn.cn/zh-cn/news/other/%E6%99%B4%E6%99%92%E6%8C%81%E7%BB%AD%E9%9C%B8%E5%B1%8F-%E7%83%A7%E7%83%A4-%E6%A8%A1%E5%BC%8F%E5%8D%B3%E5%B0%86%E5%BC%80%E5%90%AF-%E4%BB%8A%E5%A4%A9%E6%9C%80%E9%AB%98%E6%B0%94%E6%B8%A933/ar-AA1ct1TR?ocid=msedgntp&cvid=250afee0dc39400ab4d971100e6ff16a&ei=29">
                <img src="tianqi3.png" alt="" width="300"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.msn.cn/zh-cn/news/national/%E6%B3%A8%E6%84%8F%E9%98%B2%E6%99%92%E9%A2%84%E9%98%B2%E4%B8%AD%E6%9A%91-%E6%88%90%E9%83%BD%E5%8F%91%E5%B8%83%E9%AB%98%E6%B8%A9%E6%A9%99%E8%89%B2%E9%A2%84%E8%AD%A6%E4%BF%A1%E5%8F%B7/ar-AA1csK0k?ocid=msedgntp&cvid=250afee0dc39400ab4d971100e6ff16a&ei=30">
                <img src="tianqi4.png" alt="" width="300"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.msn.cn/zh-cn/news/other/%E6%B0%94%E8%B1%A1%E9%83%A8%E9%97%A8%E9%A2%84%E8%AE%A114%E6%97%A5%E8%87%B320%E6%97%A5%E8%BE%BD%E5%AE%81%E6%8C%81%E7%BB%AD%E6%99%B4%E7%83%AD%E9%AB%98%E6%B8%A9-%E9%9C%80%E9%98%B2%E8%8C%83%E4%B8%8D%E5%88%A9%E5%BD%B1%E5%93%8D/ar-AA1csOhy?ocid=msedgntp&cvid=7427fb566fcf4543914da012ac8dc028&ei=16">
                <img src="tianqi5.png" alt="" width="300"></a>
            <br><br>
            <a href="https://www.tianqi.com/news/326069.html?qid=micro"><img src="tianqi8.png" alt="" width="620"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.tianqi.com/news/326096.html?qid=micro"><img src="tianqi6.png" alt="" width="300"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.msn.cn/zh-cn/news/other/%E5%85%A8%E6%80%BB%E8%A6%81%E6%B1%82%E5%81%9A%E5%A5%BD2023%E5%B9%B4%E8%81%8C%E5%B7%A5%E9%98%B2%E6%9A%91%E9%99%8D%E6%B8%A9%E5%B7%A5%E4%BD%9C/ar-AA1cvw4f?ocid=msedgntp&cvid=b2dcedebbeb240309c8206ca572412f3&ei=20">
                <img src="tianqi7.png" alt="" width="300">
            </a>
        </div>
    </div>

</body>

</html>